<template>
	<view class="store-container">
		<u-gap height="14"></u-gap>
		<view class="store-info">
			<u--image :src="selectedStore.logo" width="44px" height="44px"></u--image>
			<u--text @click="storeShow = true" :text="selectedStore.name" bold margin="0 0 0 12px" 
				suffixIcon="arrow-right" iconStyle="font-weight: bold; font-size: 14px; margin-left: 8px"></u--text>
		</view>
		<u-gap height="14"></u-gap>
		<u-picker :show="storeShow" :columns="storeColumns" keyName="name" 
			@confirm="handleConfirm" @cancel="storeShow = false" :defaultIndex="defaultIndex"></u-picker>
	</view>
</template>

<script>
	import { mapGetters, mapMutations } from 'vuex'
	export default {
		name: 'selectStore',
		data() {
			return {
				storeShow: false,
				storeColumns: [],
				defaultIndex: undefined
			}
		},
		computed: {
			 ...mapGetters([
				'selectedStore',
				'pickUpStore'
			]),
		},
		mounted() {
			this.storeColumns = [[...this.pickUpStore]];
			this.defaultIndex = [this.pickUpStore.findIndex(item => item.id == this.selectedStore.id)];
		},
		methods: {
			...mapMutations(['SET_SELECTEDSTORE']),
			handleConfirm(arr) {
				this.SET_SELECTEDSTORE(arr.value[0]);
				this.storeShow = false;
				this.$emit('confirm')
			},
		}
	}
</script>

<style scoped>
	.store-container {
		width: 100%;
	}
	.store-info {
		width: 100%;
		display: flex;
		align-items: center;
	}
</style>